<!doctype html>
<html><head>
	<meta charset="utf-8">
	<title>列表页</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	
	<!-- jQuery-->
	<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>
	
	<!-- layui-->
	<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all">
	<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>
	
	<!-- common -->
	<link rel="stylesheet" href="/static/admin/css/common.css" media="all" />
	<script type="text/javascript" src="/static/admin/js/common-grid.js"></script>
	<link rel="stylesheet" href="/static/admin/css/mini-ease.css" media="all" />
	
	<!-- iconfont -->
	<link rel="stylesheet" href="/static/css/icon/iconfont.css" media="all" />
	
</head>
<body style="padding: 10px 0 0 10px;">
	
	<div class="layui-row layui-col-space5" style="width:100%;">
		<!-- 左边面板【start】 -->
		<div class="layui-col-md12" id="id_panel_left_grid">
			<div class="layui-panel" style="overflow: auto; padding-top: 0.2rem;">
				<div class="mid-content">
					
					<table class="layui-hide" id="main_table" lay-filter="main_table"></table>
	
	<script type="text/html" id="templet_index_no">
	{{d.LAY_TABLE_INDEX+1}}
	</script>
					
					<script th:inline="javascript">
					var table_id = 'main_table';
					layui
						.use(['form', 'element', 'table', 'util', 'laydate'], function(){
						var element = layui.element;
						var table = layui.table;
						var form = layui.form;
						var util = layui.util;
						var $ = layui.jquery;
						var laydate = layui.laydate;
						
						// 创建渲染实例
						table.render({
							elem: '#' + table_id
							,url:'[(${dto.pathGridRequest})]' // 此处为静态模拟数据，实际使用时需换成真实接口
							,defaultToolbar: [{
									title: '刷新页面'
									,layEvent: 'LAYTABLE_REFRESH'
									,icon: 'layui-icon-refresh'
								}]
							,height: window.innerHeight - 140 // 最大高度减去其他容器已占有的高度差
							,limit : 20
							,limits : [20,50,500,9999]
							,where: getConds()
							,cellMinWidth: 95
							,totalRow: false // 开启合计行
							,page: true
							,request: {
								pageName: 'page',
								limitName: 'size'
							}
							,skin: 'row'
							,even: true // 开启隔行背景
							,cols: [ 
								[(${dto.colGrids})]
							 ]
							,done: function(){

								// 绑定查询按钮--表格重载成功后
								$('#id_filter_form_search').on('click', function(e){
									layui.table.reload("main_table",{
										page: {
											curr: 1
										},
										where: getConds()
									})
								});
							}
							,error: function(res, msg){
								console.log(res, msg)
							}
						});

						var indexSearchForm = 0;
						// 工具栏事件
						table.on('toolbar(main_table)', function(obj){
							var id = obj.config.id;
							var checkStatus = table.checkStatus(id);
							var othis = lay(this);
							switch(obj.event){
								case 'LAYTABLE_REFRESH':
								{
									layer.confirm("确定刷新吗？",{
										btn: ['确定', '取消']
									}, function (index) {
										location.reload();
										layer.close(index);
									});
									break;
								}
							};
						});
						 
						//触发单元格工具事件
						table.on('tool(main_table)', function(obj){ // 双击 toolDouble
							var data = obj.data;
							//console.log(obj)
						});
						
						//触发表格复选框选择
						table.on('checkbox(main_table)', function(obj){
							console.log(obj)
						});
						 
						//触发表格单选框选择
						table.on('radio(main_table)', function(obj){
							console.log(obj)
						});
						
						// 行单击事件
						table.on('row(main_table)', function(obj){
						});

						// 清空按钮
						form.on('submit(filter_form_search_clear)', function(data){
							layer.confirm("确定清空搜索条件吗？",{
								btn: ['确定', '取消']
							}, function (index) {
								$('form[name="searchForm"]').find('input[type=text],select').each(function() {
									$(this).val('');
								});
								layer.close(index);
							});
							return false;
						});
						
						//初始化搜索框-日期范围
						lay('.bo-search-field-date').each(function(){
							laydate.render({
								elem: this
								, type: 'date'
								, range: '~'
								//, max: maxtime//设置选择最大时间为当前
								, calendar: true
								, btns: ['clear', 'confirm', 'now']
								, done: function (value, date) {
									//这里时选中后触发事件
									//value是选中的值
									var time = value;
								}
							});
						});
						
						//初始化搜索框-年份
						lay('.bo-search-field-year').each(function(){
							laydate.render({
								elem: this
								, type: 'year'
								//, max: maxtime//设置选择最大时间为当前
								, calendar: false
								, btns: ['clear', 'confirm']
								, done: function (value, date) {
									//这里时选中后触发事件
									//value是选中的值
									var time = value;
								}
							});
						});
					});
					
					// 
					$('body').on("mouseenter",".layui-table-body tr",function () {
					    $(this).siblings().find("div").css("color","#142A48");
					    $(this).find("div").css("color","#4DA1FF");
					})
					
					var multySelected = [(${dto.multySelected})]
					var callbackdata = function () {//回调函数
						var datas = layui.table.checkStatus('main_table').data;
						if(multySelected == 0) {
							if(datas.length == 1){
								return datas[0];
							} else return "none";
						} else {
							if(datas.length >= 1){
								return datas;
							} else return "none";
						}
					}
					</script>
				</div>
			</div>
		</div>
		<!-- 左边面板【end】 -->
		
		<!-- 搜索面板【start】 -->
		<div id="id_form_search" class="layui-col-md2 search-panel">
			<div class="search-top" style="background: rgb(0, 135, 250);">
				<a data-id="icon-to-hide" href="javascript:;" onclick="hideSearch();">
					<i class="layui-icon layui-icon-spread-left" id="LAY_app_flexible" style="color: #fff;"></i>
					<span style="color: white; margin-left: 100px;">搜索条件</span>
				</a>
				<a data-id="icon-to-show" href="javascript:;" onclick="showSearch();">
					<i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible" style="color: #fff;"></i>
				</a>
			</div>
			<form class="layui-form margin_0" name="searchForm" style="padding: 0.2rem; width: 290px;">
				<div class="layui-form-item margin_0">
					<div class="layui-inline layui-col-xs12 margin_0" th:each="condition : ${dto.conditions}" style="margin-right: 0px;">
						<input th:if="${condition.type} eq 't_hidden'" th:name="${condition.code}" type="hidden" th:cond-range-type="${condition.rangeType}" th:value="${condition.value}" class="bo-search-field">
						<div th:if="${condition.type} eq 't_text'">
							<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">[[${condition.name}]]:</label>
							<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
								<input th:name="${condition.code}" type="text" autocomplete="off" th:placeholder="${condition.placeHolder}" th:cond-range-type="${condition.rangeType}" th:value="${condition.value}" class=" height_24 layui-input bo-search-field" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;">
								<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';"></i>
							</div>
						</div>
						<div th:if="${condition.type} eq 't_monthly'">
							<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">[[${condition.name}]]:</label>
							<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
								<input th:name="${condition.code}" type="text" autocomplete="off" th:placeholder="${condition.placeHolder}" th:cond-range-type="${condition.rangeType}" th:value="${condition.value}" class=" height_24 layui-input bo-search-field bo-search-field-yyyymm" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;">
								<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';"></i>
							</div>
						</div>
						<div th:if="${condition.type} eq 't_date'">
							<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">[[${condition.name}]]:</label>
							<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
								<input th:name="${condition.code}" type="text" autocomplete="off" th:placeholder="${condition.placeHolder}" th:cond-range-type="${condition.rangeType}" th:value="${condition.value}" class=" height_24 layui-input bo-search-field bo-search-field-date" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;">
								<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';"></i>
							</div>
						</div>
						<div th:if="${condition.type} eq 't_datetime'">
							<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">[[${condition.name}]]:</label>
							<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
								<input th:name="${condition.code}" type="text" autocomplete="off" th:placeholder="${condition.placeHolder}" th:cond-range-type="${condition.rangeType}" th:value="${condition.value}" class=" height_24 layui-input bo-search-field bo-search-field-datetime" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;">
								<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';"></i>
							</div>
						</div>
						<div th:if="${condition.type} eq 't_year'">
							<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">[[${condition.name}]]:</label>
							<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
								<input th:name="${condition.code}" type="text" autocomplete="off" th:placeholder="${condition.placeHolder}" th:cond-range-type="${condition.rangeType}" th:value="${condition.value}" class=" height_24 layui-input bo-search-field bo-search-field-year" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;">
								<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';"></i>
							</div>
						</div>
						<div th:if="${condition.type} eq 't_buttontext'">
							<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">[[${condition.name}]]:</label>
							<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
								<input th:data-guid-field-value="${condition.id}" type="hidden" th:name="${condition.code}" th:cond-range-type="${condition.rangeType}" th:value="${condition.value}" class="bo-search-field">
								<input th:data-guid-field-name="${condition.id}" type="text" th:placeholder="${condition.placeHolder}" autocomplete="off" class="height_24 layui-input" value="" style="border: solid 0.1px; border-color: #B5B5B5; width:90%;" readonly="readonly">
								<i class="layui-icon layui-icon-close-fill" title="清空此条件" onclick="this.previousSibling.previousSibling.value = '';this.previousSibling.previousSibling.previousSibling.previousSibling.value = '';"></i>
								<i style="position: relative; right: 40px;" class="layui-icon layui-icon-more" th:onclick="showModal('[(${condition.id})]')"></i>
							</div>
						</div>
						<div th:if="${condition.type} eq 't_dropdown'">
							<label class="layui-form-label padding_2 width_80 text_overflow_ellipsis">[[${condition.name}]]:</label>
							<div class="layui-input-block bo-input-clear height_24 line_height_24 min_height_24 margin_l_90">
								<select th:name="${condition.code}" class="bo-search-field-selector">
									<option th:each="option: ${condition.optionArr}" th:value="${option.value}" th:text="${option.name}"></option>
								</select>
							</div>
						</div>
					</div>
				</div>
				<div style="width:100%; text-align: center;">
					<a id="id_filter_form_search" class="layui-btn layui-btn-normal layui-btn-xs search_btn"><i class="layui-icon layui-icon-search"></i> 查询</a>
					<button id="id_filter_form_clear" type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-filter="filter_form_search_clear"><i class="layui-icon layui-icon-close"></i> 清空</button>
				</div>
			</form>
		</div>
		
		<script type="text/javascript">
		function hideSearch() {
			var objSearch = $('#id_form_search');
			objSearch.removeClass('layui-col-md2');
			objSearch.find('form[name="searchForm"]').hide();
			objSearch.find('a[data-id="icon-to-hide"]').hide();
			objSearch.find('a[data-id="icon-to-show"]').show();
			
			$('#id_panel_left_grid').removeClass('layui-col-md10');
			$('#id_panel_left_grid').addClass('layui-col-md12');
		}
		function showSearch() {
			var objSearch = $('#id_form_search');
			objSearch.addClass('layui-col-md2');
			objSearch.find('form[name="searchForm"]').show();
			objSearch.find('a[data-id="icon-to-show"]').hide();
			objSearch.find('a[data-id="icon-to-hide"]').show();
			
			$('#id_panel_left_grid').removeClass('layui-col-md12');
			$('#id_panel_left_grid').addClass('layui-col-md10');
		}
		</script>
		<!-- 搜索面板【end】 -->
		
	</div>
	
	<script type="text/javascript">
	// 设置高度
	$(function() {
		$('#id_panel_left_grid').css('height', (window.innerHeight - 40) + 'px');
		$('#id_form_search').find('a[data-id="icon-to-show"]').hide();
	});
	</script>
</body>
		
</html>